

$btnBgColorDefault: #0D65B9;
$btnBgColorDefaultShadow: #375092;

$btnBgColorSuccess: #11CC0D;
$btnBgColorSuccessShadow: #054D15;
$btnBorderColorSuccess: #179015;

$btnBgColorWarn: #FABD16;
$btnBgColorWarnShadow: #927937;

$btnBgColorError: #ED0D0D;
$btnBgColorErrorShadow: #4E0606;
$btnBorderColorError: #9B1818;

$btnHeight: 62px;

$btnHeightMax: 72px;

.btn {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  position: relative;
  height: $btnHeightMax;
  line-height: 62px;
  border: none;
  color: #FFF;
  text-shadow: 0px 0.5px 0px #333;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  background-color: transparent;
  cursor: pointer;
  &::before, &::after {
    position: absolute;
    z-index: 0;
    left: 0;
    content: "";
    width: 100%;
    height: $btnHeight;
    border-radius: 8px;
  }
  &::before{
    top: 10px;
  }
  &::after{
    top: 0;
  }
  span {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    height: $btnHeight;
    line-height: $btnHeight;
  }
}
.btn-default, .btn-warn, .btn-error, .btn-success {
  line-height: 73px;
  border-radius: 8px;
  &::before, &::after {
    display: none;
  }
  span {
    height: $btnHeightMax;
  }
}
.btn-default {
  border: 1px solid #3C76F4;
  background: linear-gradient(180deg, #2563EB 0%, #134AC1 100%);
  // &::before{
  //   background-color: $btnBgColorDefaultShadow;
  // }
  // &::after{
  //   background-color: $btnBgColorDefault;
  // }
}
.btn-success {
  border: 1px solid $btnBgColorSuccess;
  background: linear-gradient(180deg, $btnBorderColorSuccess 0%, $btnBgColorSuccess 100%);
  // &::before{
  //   top: 10px;
  //   background-color: $btnBgColorSuccessShadow;
  // }
  // &::after{
  //   width: calc(100% - 16px);
  //   height: calc($btnHeight - 16px);
  //   border-radius: 10px;
  //   border: 8px solid $btnBorderColorSuccess;
  //   background-color: $btnBgColorSuccess;
  // }
}
.btn-warn {
  color: #000;
  border: 1px solid #FABD16;
  background: linear-gradient(180deg, #FABD16 0%, #A9831F 100%);
  animation: --led-light--keyframes--flashing .7s linear infinite;
  >span {
    gap: 15px;
    line-height: normal;
  }
  &.btn-wran-helmet{
    // background: linear-gradient(180deg, #dba613 0%, #947119 100%);
  }
  &.btn-wran-intrude{
    // background: linear-gradient(180deg, #dba213 0%, #ba8a11 100%);
  }
  // &::before{
  //   display: none;
  //   background-color: $btnBgColorWarnShadow;
  // }
  // &::after{
  //   background-color: $btnBgColorWarn;
  // }
}
.btn-error {
  border: 1px solid $btnBgColorError;
  background: linear-gradient(180deg, $btnBorderColorError 0%, $btnBgColorError 100%);
  // &::before{
  //   background-color: $btnBorderColorError;
  // }
  // &::after{
  //   background-color: $btnBgColorError;
  // }
}
// .btn-error {
//   &::before{
//     top: 10px;
//     background-color: $btnBgColorErrorShadow;
//   }
//   &::after{
//     width: calc(100% - 16px);
//     height: calc($btnHeight - 16px);
//     border-radius: 10px;
//     border: 8px solid $btnBorderColorError;
//     background-color: $btnBgColorError;
//   }
// }

@keyframes --led-light--keyframes--flashing {
  0% {
      box-shadow: 0 0 4px $btnBgColorWarnShadow;
  }

  19% {
      box-shadow: 0 0 8px $btnBgColorWarnShadow;
  }

  51% {
      box-shadow: 0 0 12px $btnBgColorWarnShadow;
  }

  to {
      box-shadow: 0 0 16px $btnBgColorWarnShadow;
  }
}